<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数式组件</title>
  </head>
  <body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 类式组件
      // 注意：
      // 1. 如果是类式组件，一定要继承 React.Component 类
      // 2. 一定要有render，类似于 constructor
      // 3. 一定要有返回值
      class MyComponent extends React.Component {
        render() {
          console.log(this) // 指向 MyComponent（当前实例）
          return <p>我是类定义的组件，适用于【复杂组件】</p>
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById('test'))

      // 注意：此时为定义 new 实例，那是如何实现的呢？
      // 解析：
      // 1. 发现 component 标签
      // 2. 判断到该组件是类定义的，react 会自动 new 实例，并通过当前实力调用 render 方法
      // 3. 转换为真实 DOM，并呈现
    </script>
  </body>
</html>
